<template>
  <div class="container">
    <n-h3 prefix="bar">账户安全</n-h3>
    <n-alert type="info" style="margin: 1rem 0">
      <n-p>请勿将密码告知他人，以免因此造成损失或账号封禁。</n-p>
      <n-p>定期更换密码有助于防止账号被盗。</n-p>
    </n-alert>
    <n-button @click="toChangePassword" type="primary">更改密码</n-button>
    <n-drawer
        v-model:show="showChangePasswordPanel"
        :placement="isMobile ? 'bottom' : 'right'"
        :trap-focus="false"
        :width="isMobile ? null : 300"
    >
      <n-drawer-content title="更改密码">
        <n-space vertical>
          <n-input v-model:value="changePasswordForm.old_password"
                   type="password"
                   show-password-toggle="click"
                   placeholder="当前密码"
          />
          <n-input v-model:value="changePasswordForm.new_password"
                   type="password"
                   show-password-toggle="click"
                   placeholder="新密码"
          />
          <n-input v-model:value="changePasswordForm.confirm_password"
                   type="password"
                   show-password-toggle="click"
                   placeholder="重复密码"
                   @keydown.enter="changePassword"
          />
          <n-button type="primary"
                    @click="changePassword"
                    :loading="changePasswordRequesting"
                    :disabled="changePasswordRequesting"
          >
            确认更改
          </n-button>
        </n-space>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {useUserStore} from "@/stores/user.js";
import {useRequests} from "@/common/requests.js";
import {useMessage, useNotification} from "naive-ui";

const userStore = useUserStore()
const requests = useRequests()
const message = useMessage()
const notify = useNotification()

const showChangePasswordPanel = ref(false)
const toChangePassword = () => {
  showChangePasswordPanel.value = true
}

const changePasswordForm = ref({
  old_password: null,
  new_password: null,
  confirm_password: null
})
const changePasswordRequesting = ref(false)
const changePassword = () => {
  if (changePasswordForm.value.old_password == null
      || changePasswordForm.value.old_password.length === 0) {
    message.error('请输入当前密码')
  } else if (changePasswordForm.value.new_password == null
      || changePasswordForm.value.new_password.length === 0) {
    message.error('请输入新密码')
  } else if (changePasswordForm.value.confirm_password == null
      || changePasswordForm.value.confirm_password.length === 0) {
    message.error('请输入确认密码')
  } else {
    changePasswordRequesting.value = true
    requests.user.password(changePasswordForm.value).then(resp => {
      changePasswordRequesting.value = false
      if (resp.ret === 0) {
        userStore.$patch({token: resp.data})
        changePasswordForm.value = {
          old_password: null,
          new_password: null,
          confirm_password: null
        }
        showChangePasswordPanel.value = false

        message.success("更改成功")
      } else {
        message.error(resp?.data ?? resp?.msg ?? "未知错误")
      }
    }).catch(err => {
      changePasswordRequesting.value = false

      console.log(err)
      notify.error({content: "出错了", meta: err.toString(), duration: 1500})
    })
  }
}
</script>
